<!--
 * @Descripttion: 生态功能区划片
-->
<template>
  <div class="eco-slicing-wrapper">
    <!-- 地图 -->
    <div class="page-map">
      <map-view
        ref="mapview"
        @initMapView="initMapViewHandler"
        @mapClickHandler="onMapClickHandler"
      ></map-view>
    </div>
    <!-- 弹框 -->
    <!-- 弹框 -->
    <EcoModal
      :result="result"
      :title="'生态功能区划片'"
      type="2"
      planType="9"
    />
  </div>
</template>
<script>
import QueryUtils from "@/utils/yc/QueryUtils";
import { draw } from "lark-map";
import ecoSlicing from "@/components/yc/mapFunction/ecoSlicing";
// 地图组件
import MapView from "@/components/yc/MapView";
import EcoModal from "../components/EcoModal";
export default {
  name: "ecoSlicing",
  components: {
    MapView,
    EcoModal,
  },
  mixins: [ecoSlicing],
  data() {
    return {
      //地图对象
      view: null,
      // 结果集
      result: null,
    };
  },
  methods: {
    /**
     * 初始化地图对象
     */
    initMapViewHandler(evt) {
      this.view = evt;
    },
    /**
     * 地图点击处理函数
     * @param {*} event
     */
    async onMapClickHandler(event) {
      this.$refs.mapview.fullscreenLoading = true;
      let feature = this.$refs.mapview.districtFeature;
      let mapPoint = event.mapPoint;
      this.result = await this.queryDataBySlicing(this.view, feature, mapPoint);
      this.$refs.mapview.fullscreenLoading = false;
    },
    // 下载
    downloadClick() {},
    // 选项卡切换回调
    tabClick() {},
  },
  mounted() {
    // 点击地图回调
    this.$eventBus.$on("mapClick", (res) => {
      this.locationInfo = res;
    });
  },
  destroyed() {
    this.$eventBus.$off("mapClick");
  },
};
</script>
<style lang="scss" scoped>
.eco-slicing-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .page-map {
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}
</style>